<template>
  <div class="PlayVideo" @click="Songinfo">
    <audio ref="music" ></audio>
    <!--  歌曲图片和名字-->
    <div class="Song">
      <div class="cover">
        <img :src="music_list?music_list.al.picUrl:''" alt="" class="CoverImg" v-show="music_list">
      </div>
      <!--  歌曲名字-->
      <div style="padding-left: 1.25rem;font-size: 0.25rem">{{ music_list ? music_list.name + ' - ' : "" }} <span
          style="font-size: 0.14rem">{{ music_list ? music_list.ar[0].name : "" }}</span></div>
    </div>
    <!--  按钮-->
    <div>
      <div style="display: flex;align-items: center">
        <svg class="icon" aria-hidden="true" style="height: 0.5rem;width: 0.5rem;" @click.stop="Playmusic"
             v-show="!action">
          <use xlink:href="#icon-play"></use>
        </svg>
        <svg class="icon" aria-hidden="true" style="height: 0.5rem;width: 0.5rem;" @click.stop="Stopmusic"
             v-show="action">
          <use xlink:href="#icon-bofangzanting"></use>
        </svg>
        <div class="Tempo">
          <div></div>
        </div>
        <svg class="icon" aria-hidden="true" style="height: 0.5rem;width: 0.5rem;padding: 0 0.3rem">
          <use xlink:href="#icon-bofangliebiao"></use>
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
import {computed, onMounted, reactive, ref, watch, watchEffect,nextTick} from "vue";
import {useStore} from 'vuex'
import {getSong} from "../../../HTTP/api";
import {useRouter} from "vue-router";
export default {
  name: "Player",
  setup() {
    let music = ref(null)
    const store = useStore()
    const router = useRouter()
    let music_info = reactive({
      music_state: {},
    })
    let music_list = reactive({})
    let action = ref(false)
    const Playmusic = () => {
      nextTick(()=>{
        music.value.play()
      })
      // action.value=true
      action.value = true
      store.commit('changeState',true)
    }
    const Stopmusic = () => {
      nextTick(()=>{
        music.value.pause()
      })
      action.value = false
      // store.commit('changeState',false)
      store.commit('changeState',false)
    }
    const Songinfo = () => {
      router.push({name: 'SongPlay'})
    }
    // console.log(music.value.src)
    music_info.music_state = computed(() => store.state)
    music_list = computed(() => store.state.SongInfo ? store.state.SongInfo : "")

    watch(music_info, async (newValue,oldValue) => {
      console.log(newValue)
      if (music_info.music_state.isPlay) {
        let Songurl = await getSong(music_info.music_state.SongInfo.id)
        if(music.value.src===Songurl.data[0].url){
          Playmusic()
        }else {
          music.value.src = Songurl.data[0].url
          store.commit('setSongNode',music.value)
          Playmusic()
        }

        // store.commit('changeState',false)
      }else if(music_info.music_state.isPlay===false){
        Stopmusic()
      }
    }, {immediate: true, deep: true})
    return {
      ...music_info,
      store,
      music,
      Playmusic,
      Stopmusic,
      music_list,
      action,
      Songinfo
    }
  }
}
</script>
<style scoped>
@import "../../assets/css/Realplayer/Realplayer.css";
</style>